<script src="/js/jquery-1.6.4.js" type="text/javascript"></script>
<script src="/js/jquery.tablesorter.pager.js" type="text/javascript"></script>
<script src="/js/jquery.uitablefilter.js" type="text/javascript"></script>
<script type="text/javascript" src="/js/jquery.liveFilter.js"></script>

<script>
  $(document).ready(function(){
    $("#ordersList").tablesorter();
  });
  

	$(document).ready(function() {
		$('#orderTable').liveFilter('what_to_filter');
	});


  
  </script>

<style>
	.orderTable
	{
		border-left: 5px solid  #00688B;
		border-right: 5px solid  #00688B;
	}
	
	.orderTableName
	{
		background-color: #00688B;
		color: #7EC0EE;
		text-align: center;
		height: 35px;
	}
	
	.orderTableHead
	{
		background-color: #1874CD;
		height: 30px;
		color: white;
	}
	.orderTableFooter
	{
		background-color: #00688B;
		height: 25px;
		color: white;
	}
	
	.orderItemGreen
	{
		background-color: #B0E2FF;
	}
	
	.orderItemRed
	{
		background-color: #FFDAB9;
	}
</style>

<input type="text" class="filter" name="liveFilter" />
<table width="100%" cellspacing="0" cellpadding="0" class="orderTable" id="ordersList">
<thead> 
	<tr class="orderTableName">
		<td colspan="4"><strong>Searh in shoping list</strong><input type="text" name="searchInOrderList"></td>
	</tr>
	<tr class="orderTableHead">
		<th>User</th>
		<th>Price</th>
		<th>Paid status</th>
		<th>Date created</th>
	</tr>
</thead>
<tbody>
	<? $totalPrice=0; ?>
<?foreach($orders as $order):?>
	<tr class=<?if($order['status'] == "Paid"):?>"orderItemGreen"<?else:?>"orderItemRed"<?endif?> >
		<td><?=$order['id']?> <?=$order['userId']?></td>
		<td width="150"><?=$order['price']?></td>
		<td width="200"><?=$order['status']?></td>
		<td width="200"><?=$order['date']?></td>
		<? $totalPrice +=$order['price']; ?>
	</tr>
<?endforeach?>
</tbody>
	<tr class="orderTableFooter">
		<td colspan="4">Count: <?=count($orders)?>  Total price: <?=$totalPrice?></td>
	</tr>

</table>
